<template>
	<view class="food_details">
		<view class="backView">
			<DetailsBack :cate="food"></DetailsBack>
		</view>

		<view class="food_header_box">
			<view class="box_left">
				<view class="box_left_item">
					<view class="box_left_avatar">
						<image :src="food.thumb_image_url" />
					</view>
					<view class="box_left_name">
						<view class="food_name">{{ food.name }}</view>
						<view class="food_calory">
							<template v-if="isShow">
								<text>{{ food.calory }}千卡</text>/每{{ food.weight }}克
							</template>
							<template v-else>
								<text>{{ parseInt(food.joule) }}千焦</text>/每100克
							</template>
						</view>
					</view>
				</view>
			</view>
			<view class="box_right">
				<text @click="toggleShow(true)" :class="isShow ? 'active' : ''">千卡</text>
				<text @click="toggleShow(false)" :class="isShow ? '' : 'active'">千焦</text>
			</view>
		</view>

		<view class="food_section_box">
			<view class="food_units">
				<text :class="unitIndex == 0 ? 'active' : ''" @click="toggleIndex(0)">每100克</text>
				<text v-for="(unit, index) in food.units" :key="unit.unit_id"
					:class="unitIndex == index + 1 ? 'active' : ''" @click="toggleIndex(index + 1)">
					{{ unit.amount }}{{ unit.unit_name }}
				</text>
			</view>

			<view class="food_sub">
				<ul>
					<li>
						<text>营养元素</text>
						<view v-if="unitIndex == 0"><text>每100克</text></view>

						<view v-if="unitIndex != 0">
							<view v-for="(unit, index) in food.units" :key="index">
								<text v-if="unitIndex == index + 1">
									{{ unit.amount }}{{ unit.unit_name }}
								</text>
							</view>
						</view>
						<text>备注</text>
					</li>
					<li>
						<text>热量</text>

						<view v-if="unitIndex == 0">
							<text v-if="isShow">{{ food.calory }}.00 千卡</text>
							<text v-else>{{ parseInt(food.calory_kj) }}.00 千焦</text>
						</view>
						<view v-if="unitIndex != 0">
							<view v-for="(unit, index) in food.units" :key="index">
								<template v-if="unitIndex == index + 1">
									<text v-if="isShow">{{(Number(((unit.eat_weight - 100) / 100) * food.calory) + Number(food.calory)).toFixed(2)}}千卡</text>
									<text v-else>{{((Number(((unit.eat_weight - 100) / 100) * food.calory) +Number(food.calory)) *4.18).toFixed(2)}}千焦</text>
								</template>
							</view>
						</view>

						<text v-if="food.lights">{{ food.lights.calory }}</text>
					</li>
					<li>
						<text>蛋白质</text>
						<view v-if="unitIndex == 0">
							<text>{{ food.protein }} 克</text>
						</view>
						<view v-if="unitIndex != 0">
							<view v-for="(unit, index) in food.units" :key="index">
								<text v-if="unitIndex == index + 1">
									{{
                      (
                        Number(((unit.eat_weight - 100) / 100) * food.protein) +
                        Number(food.protein)
                      ).toFixed(2)
                    }}克
								</text>
							</view>
						</view>

						<text v-if="food.lights">{{ food.lights.protein }}</text>
					</li>
					<li>
						<text>脂肪</text>
						<view v-if="unitIndex == 0">
							<text>{{ food.fat }} 克</text>
						</view>

						<view v-if="unitIndex != 0">
							<view v-for="(unit, index) in food.units" :key="index">
								<text v-if="unitIndex == index + 1">
									{{
                      (
                        Number(((unit.eat_weight - 100) / 100) * food.fat) +
                        Number(food.fat)
                      ).toFixed(2)
                    }}克
								</text>
							</view>
						</view>

						<text v-if="food.lights">{{ food.lights.fat }}</text>
					</li>
					<li>
						<text>碳水化合物</text>
						<view v-if="unitIndex == 0">
							<text>{{ food.carbohydrate }} 克</text>
						</view>

						<view v-if="unitIndex != 0">
							<view v-for="(unit, index) in food.units" :key="index">
								<text v-if="unitIndex == index + 1">
									{{
                      (
                        Number(
                          ((unit.eat_weight - 100) / 100) * food.carbohydrate
                        ) + Number(food.carbohydrate)
                      ).toFixed(2)
                    }}克
								</text>
							</view>
						</view>

						<text v-if="food.lights">{{ food.lights.carbohydrate }}</text>
					</li>
					<li>
						<text>膳食纤维</text>
						<view v-if="unitIndex == 0">
							<text v-if="unitIndex == 0">{{ food.fiber_dietary }} 克</text>
						</view>

						<view v-if="unitIndex != 0">
							<view v-for="(unit, index) in food.units" :key="index">
								<text v-if="unitIndex == index + 1">
									{{
                      (
                        Number(
                          ((unit.eat_weight - 100) / 100) * food.fiber_dietary
                        ) + Number(food.fiber_dietary)
                      ).toFixed(2)
                    }}克
								</text>
							</view>
						</view>

						<text v-if="food.lights">{{ food.lights.fiber_dietary }}</text>
					</li>
				</ul>
			</view>
			<view class="van-cell" @click="showPopup(true)"><text class="moveBtn">更多营养元素</text></view>
			<!-- <van-cell @click="showPopup"><text class="moveBtn">更多营养元素</text></van-cell>
			<van-popup v-model="show" position="bottom" :style="{ height: '70vh' }"> -->
			<view class="mask" v-if="show" @touchmove.stop.prevent="()=>{}"   @click="showPopup(false)"></view>
			<scroll-view scroll-y="true" class="van-popup" :class="show?'up':'down'">
				<view class="food_sub"  :style="{ padding: '10px 15px 0 15px' }">
					<ul v-if="food.ingredient">
						<li>
							<text>营养元素</text>
							<view v-if="unitIndex == 0"><text>每100克</text></view>
				
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{ unit.amount }}{{ unit.unit_name }}
									</text>
								</view>
							</view>
				
							<text>备注</text>
						</li>
				
						<li>
							<text>热量</text>
				
							<view v-if="unitIndex == 0">
								<text v-if="isShow">{{ food.calory }}.00 千卡</text>
								<text v-else>{{ parseInt(food.calory_kj) }}.00 千焦</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<template v-if="unitIndex == index + 1">
										<text v-if="isShow">{{
				              (
				                Number(
				                  ((unit.eat_weight - 100) / 100) * food.calory
				                ) + Number(food.calory)
				              ).toFixed(2)
				            }}千卡</text>
										<text v-else>{{
				              (
				                (Number(
				                  ((unit.eat_weight - 100) / 100) * food.calory
				                ) +
				                  Number(food.calory)) *
				                4.18
				              ).toFixed(2)
				            }}千焦</text>
									</template>
								</view>
							</view>
				
							<text v-if="food.lights">{{ food.lights.calory }}</text>
						</li>
				
						<li>
							<text>蛋白质</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.protein }} 克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) * food.protein
				              ) + Number(food.protein)
				            ).toFixed(2)
				          }}克
									</text>
								</view>
							</view>
				
							<text v-if="food.lights">{{ food.lights.protein }}</text>
						</li>
				
						<li>
							<text>脂肪</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.fat }} 克</text>
							</view>
				
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(((unit.eat_weight - 100) / 100) * food.fat) +
				              Number(food.fat)
				            ).toFixed(2)
				          }}克
									</text>
								</view>
							</view>
				
							<text v-if="food.lights">{{ food.lights.fat }}</text>
						</li>
				
						<li>
							<text>碳水化合物</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.carbohydrate }} 克</text>
							</view>
				
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) * food.carbohydrate
				              ) + Number(food.carbohydrate)
				            ).toFixed(2)
				          }}克
									</text>
								</view>
							</view>
				
							<text v-if="food.lights">{{ food.lights.carbohydrate }}</text>
						</li>
				
						<li>
							<text>膳食纤维</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.fiber_dietary }} 克</text>
							</view>
				
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) * food.fiber_dietary
				              ) + Number(food.fiber_dietary)
				            ).toFixed(2)
				          }}克
									</text>
								</view>
							</view>
							<text v-if="food.lights">{{ food.lights.fiber_dietary }}</text>
						</li>
				
						<li>
							<text>维生素A</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.vitamin_a }} ugRE</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.vitamin_a
				              ) + Number(food.ingredient.vitamin_a)
				            ).toFixed(2)
				          }}ugRE
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>维生素C</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.vitamin_c }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.vitamin_c
				              ) + Number(food.ingredient.vitamin_c)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>维生素E</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.vitamin_e }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.vitamin_e
				              ) + Number(food.ingredient.vitamin_e)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>胡萝卜素</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.carotene }} 微克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.carotene
				              ) + Number(food.ingredient.carotene)
				            ).toFixed(2)
				          }}微克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>维生素B1</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.thiamine }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.thiamine
				              ) + Number(food.ingredient.thiamine)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>维生素B2</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.lactoflavin }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.lactoflavin
				              ) + Number(food.ingredient.lactoflavin)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>烟酸</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.niacin }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.niacin
				              ) + Number(food.ingredient.niacin)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>胆固醇</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.cholesterol }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.cholesterol
				              ) + Number(food.ingredient.cholesterol)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>镁</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.magnesium }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.magnesium
				              ) + Number(food.ingredient.magnesium)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>钙</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.calcium }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.calcium
				              ) + Number(food.ingredient.calcium)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>铁</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.iron }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.iron
				              ) + Number(food.ingredient.iron)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>锌</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.zinc }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.zinc
				              ) + Number(food.ingredient.zinc)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>铜</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.copper }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.copper
				              ) + Number(food.ingredient.copper)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>锰</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.manganese }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.manganese
				              ) + Number(food.ingredient.manganese)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>钾</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.kalium }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.kalium
				              ) + Number(food.ingredient.kalium)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>磷</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.phosphor }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.phosphor
				              ) + Number(food.ingredient.phosphor)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
				
						<li>
							<text>钠</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.natrium }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.natrium
				              ) + Number(food.ingredient.natrium)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text v-if="food.lights">{{ food.lights.natrium }}</text>
						</li>
				
						<li>
							<text>硒</text>
							<view v-if="unitIndex == 0">
								<text>{{ food.ingredient.selenium }} 毫克</text>
							</view>
							<view v-if="unitIndex != 0">
								<view v-for="(unit, index) in food.units" :key="index">
									<text v-if="unitIndex == index + 1">
										{{
				            (
				              Number(
				                ((unit.eat_weight - 100) / 100) *
				                  food.ingredient.selenium
				              ) + Number(food.ingredient.selenium)
				            ).toFixed(2)
				          }}毫克
									</text>
								</view>
							</view>
				
							<text></text>
						</li>
					</ul>
				</view>
			</scroll-view>
		</view>

		<view class="food_section_box_two">
			<ul>
				<li>
					<text>GI值</text><text>{{ food.gi }}</text>
					<text v-if="food.lights">{{ food.lights.gi }}</text>
				</li>
				<li>
					<text>GL值</text><text>{{ food.gl }}</text>
					<text v-if="food.lights">{{ food.lights.gl }}</text>
				</li>
			</ul>
		</view>

		<view class="food_section_box_three">
			<view class="box_title">
				<text>食物红绿灯:</text>
			</view>
			<view class="box_content">
				<image v-if="food.health_light == 1" src="../../static/ic_recommend.png" />
				<image v-if="food.health_light == 2" src="../../static/ic_suit.png" />
				<image v-if="food.health_light == 3" src="../../static/ic_less.png" />
				<text v-if="food.health_appraise">{{
            food.health_appraise[0].appraise
          }}</text>
			</view>
		</view>

		<view class="food_section_box_five">
			<view class="box_title">
				<text>所含热量:</text>
			</view>
			<view class="box_compare" v-if="food.compare">
				<view class="target_image_url">
					<image v-if="food.compare.target_image_url" :src="food.compare.target_image_url" alt="" />
					<image v-else src="../../static/mis_default_error.png" alt="" />
				</view>
				<view class="box_content">
					<text class="box_amount1"><b>X</b> {{ food.compare.amount1 }}</text>
					<text>{{ food.compare.amount0 }}{{ food.compare.unit0
              }}{{ food.name }} ≈ {{ food.compare.amount1
              }}{{ food.compare.unit1 }}{{ food.compare.target_name }}
					</text>
				</view>
			</view>

			<view class="box_unit">
				<ul>
					<li v-for="(unit, index) in food.units" :key="index">
						<text>{{ unit.unit_name }}</text>
						<text>{{ unit.weight }}克</text>
						<text v-if="isShow">{{
                  (
                    Number(((unit.eat_weight - 100) / 100) * food.calory) +
                    Number(food.calory)
                  ).toFixed(2)
                }}
							千卡</text>
						<text v-else>{{
                  (
                    (Number(((unit.eat_weight - 100) / 100) * food.calory) +
                      Number(food.calory)) *
                    4.18
                  ).toFixed(2)
                }}
							千焦</text>
					</li>
				</ul>
			</view>
		</view>

		<!-- 按钮列表 -->
		<view class="foodBtn">
		<FoodBtnList @to-collection="toCollection" :iscollectionState="iscollectionState" ></FoodBtnList>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				food: {},
				isShow: true, //千卡和千焦
				show: false, //弹出层状态
				unitIndex: 0,
				Collection: [],
				iscollectionState: false, //收藏状态
			};
		},
		onLoad(options) {
			let code = options.code;
			this.loading = true;
			uni.request({
				url: `https://food.boohee.com/fb/v1/foods/${code}/mode_show`,
				success: (res) => {
					this.food = res.data;
					this.loading = false;

					try {
						const value = uni.getStorageSync('collection');
						if (value) {
							this.Collection = JSON.parse(value);
						} else {
							this.Collection = []
						}
					} catch (e) {
						// error
					}
					let temp = this.Collection.indexOf(this.food.id);
					console.log(temp);
					if (temp != -1) {
						this.iscollectionState = true;
					} else {
						this.iscollectionState = false;
					}
				}
			})
		},
		methods: {
			showPopup(e) {
				this.show = e;
			},
			toggleShow: function(state) {
				this.isShow = state;
			},
			toggleIndex: function(index) {
				this.unitIndex = index;
			},
			toCollection: function() {
				let id = this.food.id;

				if (this.iscollectionState == false) {
					this.Collection.push(id);

					uni.setStorageSync("collection", JSON.stringify(this.Collection))
					this.iscollectionState = true;
				} else {
					this.Collection = this.Collection.filter((item) => item != id);

					uni.setStorageSync("collection", JSON.stringify(this.Collection))
					this.iscollectionState = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.food_details {
		.backView {
			position: sticky;
			top: 0;
			left: 0;
			z-index: 4;
		}

		.food_header_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 85px;
			background: white;
			padding: 0 15px;


			.box_left {
				flex: 1;

				.box_left_item {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.box_left_avatar {
						image {
							width: 50px;
							height: 50px;
							border-radius: 50%;
						}
					}

					.box_left_name {
						text-align: left;
						margin-left: 10px;
						margin-bottom: 10px;
						letter-spacing: 1px;

						.food_name {
							font-size: 15px;
						}

						.food_calory {
							margin-top: 5px;
							font-size: 14px;

							text {
								font-size: 22px;
							}
						}
					}
				}
			}

			.box_right {
				margin-top: 45px;

				text {
					display: inline-block;
					font-size: 14px;
					margin-left: 10px;
					padding: 10px 0;
				}

				.active {
					border-bottom: 1px solid #fc9595;
				}
			}
		}

		.food_section_box {
			padding: 15px;
			background: white;
			min-height: 150px;
			margin-top: 15px;

			.food_units {
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				border: 1px solid #eeeeee;
				font-size: 13px;
				height: 30px;
				line-height: 30px;
				border-radius: 3px;

				text {
					flex: 1;
					height: 100%;
					padding: 0 10px;
					color: #9c9c9c;
				}

				.active {
					background: #eeeeee;
					transition: all 0.8s;
				}
			}

			.food_sub {
				padding: 10px 0;

				ul {
					display: flex;
					flex-direction: column;
					padding: 0;

					li {
						display: flex;
						align-items: center;
						font-size: 14px;
						padding: 10px 0;
						border-bottom: 1px solid #d6d5d9;

						text {
							&:nth-of-type(1) {
								text-align: left;
								width: 40vw;
							}

							&:nth-of-type(2) {
								width: 30vw;
								text-align: right;
								color: #ff7676;
							}
						}

						view {
							width: 30vw;
							text-align: right;
						}

						&:nth-of-type(1) {
							color: #9c9c9c;

							text {
								&:nth-of-type(2) {
									color: #9c9c9c;
								}
							}
						}
					}
				}
			}

			.van-cell {
				padding: 0;
				font-size: 14px;
			}
			.mask{
				position: fixed;
				z-index: 5;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0,0,0,0.5);
				left: 0;
				top: 0;
			}
			.up{
				transform: translateY(-100%);
			}
			.down{
				transform: translateY(0);
			}
			.van-popup{
				position: fixed;
				padding: 10px;
				box-sizing: border-box;
				left: 0;
				bottom: -70%;
				height: 70%;
				background-color: white;
				width: 100%;
				z-index: 6;
				border-radius: 20px 20px 0 0;
				transition: all 0.5s;
			}
		}

		.food_section_box_two {
			margin-top: 15px;
			background: white;

			ul {
				padding: 0 15px;



				li {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 40px;
					border-bottom: 1px solid #dcdbdf;

					text {
						color: #ff7676;
						font-size: 14px;

						&:nth-of-type(1) {
							text-align: left;
							width: 40vw;
						}

						&:nth-of-type(2) {
							text-align: right;
							width: 24vw;
						}

						&:nth-of-type(3) {
							text-align: right;
							width: 36vw;
						}
					}

					&:nth-of-type(2) {
						border-bottom: none;
					}
				}
			}
		}

		.food_section_box_three {
			margin-top: 15px;
			background: white;
			padding: 10px 15px;
			font-size: 14px;

			.box_title {
				text-align: left;
			}

			.box_content {
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 0;

				image {
					width: 65px;
					height: 24px;
				}

				text {
					flex: 1;
					font-size: 13px;
					text-align: left;
					margin-left: 10px;
				}

				.van-skeleton__avatar {
					margin-top: 20px;
					width: 50px;
					height: 50px;
				}


			}
		}

		.food_section_box_five {
			margin: 15px 0;
			background: white;
			padding: 15px;
			font-size: 14px;

			.box_title {
				text-align: left;
			}

			.box_compare {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin: 10px 0;


				.target_image_url {
					image {
						width: 50px;
						height: 50px;
					}
				}

				.box_content {
					display: flex;
					flex-direction: column;
					text-align: left;
					margin-left: 20px;

					text {
						&:nth-of-type(1) {
							color: #ff6e6e;
							font-size: 22px;

							b {
								font-size: 16px;
							}
						}

						&:nth-of-type(2) {
							color: #9c9c9c;
							font-size: 14px;
						}
					}
				}
			}

			.box_unit {
				ul {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0;

					li {
						padding: 10px 0;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-top: 1px solid #dfdee1;

						&:last-child {
							border-bottom: 1px solid #dfdee1;
						}


					}
				}
			}
		}

		.foodBtn {
			position: sticky;
			left: 0;
			bottom: 0;
			z-index: 5;
		}
	}
</style>
